<template>
  <div id="PickingByOrder">
    <root name="PickingByOrder">
      <SafeHeader
        v-bind="{
          title: '按单拣货',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 任务 </v-tab>
        <v-tab class="wms-tab"> 拣货 </v-tab>
        <!-- 任务页面 -->
        <v-tab-item class="task" transition="slide-y-transition">
          <v-container
            class="my-4 white lighten-5 py-2"
            style="line-height: 1.75rem"
          >
            <v-row class="mt-0">
              <v-col cols="3" class="py-2 d-flex align-center card-lable">
                <span>出库单号 </span>
              </v-col>
              <v-col class="py-1">
                <v-text-field
                  class="my-0"
                  dense
                  hide-details
                  @keydown.13="taskCodeSearch"
                  v-model="outBillForm.billNo"
                  placeholder="支持扫描出库单号查询"
                >
                </v-text-field>
              </v-col>
            </v-row>
            <v-row class="mt-1">
              <v-col cols="3" class="py-2 card-lable"> 状态 </v-col>
              <v-col class="py-2 card-value">{{ outBillForm.state }}</v-col>
            </v-row>
            <v-row class="mt-1">
              <v-col cols="3" class="py-2 card-lable"> 计划日期 </v-col>
              <v-col class="py-2 card-value">{{
                outBillForm.createTime
              }}</v-col>
            </v-row>
          </v-container>
          <v-container class="task_list white">
            <v-row>
              <v-col
                cols="12"
                class="card-title"
                style="padding-bottom: 8px; padding-top: 8px"
                >拣货任务列表</v-col
              >
            </v-row>
            <v-divider class="mb-2"></v-divider>
            <div v-if="pickTaskList[0]">
              <v-container v-for="(item, index) in pickTaskList" :key="index">
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料编码</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >物料名称</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemName
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >推荐容器</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.boxCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >所属库位</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.cellCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="4" class="py-1 card-lable"
                            >容器内数量</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.pickQuantity
                          }}</v-col>
                        </v-row>
                        <v-divider class="mt-1 mb-2"></v-divider>
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            align-center
                            pt-1
                          "
                        >
                          <v-col
                            cols="4"
                            class="py-1 card-lable"
                            style="color: #323333"
                            >拣货数量</v-col
                          >
                          <v-col class="py-1 card-value" style="color: #ffc352">
                            {{ item.pickQty ? item.pickQty : 0 }}</v-col
                          >
                          <v-col cols="3" class="d-flex justify-end py-1">
                            <v-btn
                              rounded
                              small
                              color="#193690"
                              dark
                              @click="picking(item)"
                              >拣货</v-btn
                            >
                          </v-col>
                        </v-row>
                      </v-card-subtitle>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </div>

            <v-row v-else>
              <v-col cols="12" class="text-center">暂无数据</v-col>
            </v-row>
          </v-container>
          <v-bottom-navigation
            height="60"
            fixed
            style="background: transparent; box-shadow: none"
          >
            <v-row
              class="pa-0 ma-0 justify-center"
              style="background: transparent"
            >
              <v-col
                cols="12"
                class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn"
                  block
                  style="
                    background-color: #193690;
                    height: 100%;
                    border-radius: 10px;
                  "
                  @click="sourceOrderQuery"
                  >源单查询</v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </v-tab-item>
        <!-- 收货页面 -->
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <v-container class="mt-2 pa-3">
            <v-card class="pickingCard" height="160">
              <v-row class="ma-0 pa-3" style="height: 100%">
                <v-col cols="12" class="d-flex justify-space-between">
                  <div
                    class="d-flex justify-space-between align-center"
                    style="width: 100%"
                  >
                    <div class="pickingCard_title">
                      {{ pickViewItem.boxCode }}
                    </div>
                    <div>
                      <v-btn
                        dark
                        x-small
                        depressed
                        color="#FFC352"
                        style="height: 22px"
                        >整箱拣货</v-btn
                      >
                    </div>
                  </div>
                </v-col>
                <v-col cols="12">{{ pickViewItem.itemCode }}</v-col>
                <v-col cols="12">{{ pickViewItem.itemName }} </v-col>
                <v-col cols="12">{{ pickViewItem.cellCode }} </v-col>
                <v-col cols="12">{{ pickViewItem.pickQuantity }}</v-col>
              </v-row>
            </v-card>
          </v-container>
          <v-container class="mt-2 py-2 px-0 pickingCard-bottom">
            <v-form
              v-model="pickingForm"
              ref="pickingForm"
              class="pickingForm"
              lazy-validation
            >
              <v-row class="pa-0">
                <v-col cols="12">
                  <v-text-field
                    label="拣货容器"
                    v-model="pickingListItem.ctCode"
                    placeholder="请输入或扫描拣货容器码"
                    :rules="rules.ctCodeRules"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="目标容器"
                    v-model="pickingListItem.targetCtCode"
                    placeholder="请输入或扫描目标容器码"
                    :rules="rules.targetCtCodeRules"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="拣货数量"
                    v-model="pickingListItem.prePickQty"
                    placeholder="请输入需要拣货的数量"
                    :rules="rules.prePickQtyRules"
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-container>
          <v-container style="font-size: 13px; color: #979899" class="py-1">
            提示：整箱拣货只需要扫描拣货容器；分箱拣货需要额外扫描目标容器及输入需要拣货的数量
          </v-container>
          <v-bottom-navigation
            height="60"
            fixed
            style="background: transparent; box-shadow: none"
          >
            <v-row
              class="pa-0 ma-0 justify-center"
              style="background: transparent"
            >
              <v-col
                cols="12"
                class="
                  pa-0
                  ma-0
                  d-flex
                  justify-space-between
                  align-center
                  mb-2
                  px-2
                  py-1
                "
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn btn-left"
                  color="#193690"
                  dark
                  outlined
                  style="
                    height: 100%;
                    border-radius: 10px;
                    width: 30%;
                    color: #193690 !important;
                  "
                  @click="pickingReturn"
                  >返回
                </v-btn>
                <v-btn
                  class="wms-submit-btn"
                  style="
                    background-color: #193690;
                    height: 100%;
                    border-radius: 10px;
                    width: 65%;
                  "
                  @click="pickingSubmit"
                  >提交</v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </v-tab-item>
      </v-tabs>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import _ from "lodash";
import { apiList } from "@/static/apiList";
import Storage from "@/utils/storage.js";

export default {
  name: "PickingByOrder",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      tab: null,
      // 出库任务表单
      outBillForm: {
        billNo: "", // 出库单号
        state: "", // 状态
        createTime: "", // 计划日期
      },
      // 待拣货任务列表
      pickTaskList: [
        {
          pickTaskId: "121",
          itemCode: "IM21102-918-123", // 物料编码
          itemName: "转子铁芯M721", // 物料编码
          boxCode: "CT-1001", // 推荐容器
          cellCode: "W1201-120-11", // 所属库位
          pickQuantity: "100", // 容器内数量
          pickQty: "0", // 拣货数量
        },
      ],
      // prePickQty: "", // 输入的拣货数量
      // targetCtCode: "", // 目标容器
      // ctCode: "", // 拣货容器

      // 拣货tab页
      pickViewItem: {
        pickTaskId: "121",
        itemCode: "IM21102-918-123", // 物料编码
        itemName: "转子铁芯M721", // 物料编码
        boxCode: "CT-1001", // 推荐容器
        cellCode: "W1201-120-11", // 所属库位
        pickQuantity: "100", // 容器内数量
        pickQty: "0", // 拣货数量
      },
      pickingListItem: {
        pickTaskId: "",
        prePickQty: "", // 输入的拣货数量
        targetCtCode: "", // 目标容器
        ctCode: "", // 拣货容器
      },
      pickingForm: true,
      rules: {
        ctCodeRules: [(v) => !!v || "请扫描或输入拣货容器编码"],
        targetCtCodeRules: [(v) => !!v || "请扫描或输入目标容器编码"],
        prePickQtyRules: [(v) => !!v || "请输入需要拣货的数量"],
      },
    };
  },
  methods: {
    // 出库单号回车
    taskCodeSearch() {
      console.log(this.outBillForm.billNo);
    },
    // 拣货按钮
    picking(item) {
      this.tab = 1;
      this.pickingListItem = item;
      console.log("picking", this.tab);
    },
    // 源单查询
    sourceOrderQuery() {
      // 进入出库单列表
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: "DeliveryOrderList",
          url: "./DeliveryOrderList.html",
        });
      } else {
        this.$root.api.api.openWin({
          name: "DeliveryOrderList",
          url: "./DeliveryOrderList.html",
        });
      }
      console.log("sourceOrderQuery");
    },
    // 拣货提交
    pickingSubmit() {
      let validateFlag = this.$refs.pickingForm.validate();
      if (validateFlag) {
        this.pickingListItem.pickTaskId = this.pickViewItem.pickTaskId;
      }
      console.log("pickingSubmit", this.pickingListItem);
    },
    // 提交返回
    pickingReturn() {
      this.pickViewItem = {
        pickTaskId: "",
        itemCode: "", // 物料编码
        itemName: "", // 物料编码
        boxCode: "", // 推荐容器
        cellCode: "", // 所属库位
        pickQuantity: "", // 容器内数量
        pickQty: "", // 拣货数量
      };
      this.$refs.pickingForm.reset();
      this.tab = 0;
    },
  },
  mounted() {
    let pageParam;
    // 页面参数
    if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      pageParam = window.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;
      this.taskCodeSearch();
      window.api.addEventListener(
        {
          name: "DeliveryOrderList",
        },
        (res) => {
          console.log(res.value.billNo);
          this.outBillForm.billNo = res.value.billNo;
          this.taskCodeSearch();
        }
      );
      // 浏览器
    } else {
      pageParam = this.$root.api.api.pageParam;
      this.outBillForm.billNo = pageParam.billNo;
      this.taskCodeSearch();
      this.$root.api.api.addEventListener(
        {
          name: "DeliveryOrderList",
        },
        (res) => {
          console.log(res.value.billNo);
          this.outBillForm.billNo = res.value.billNo;
          this.taskCodeSearch();
        }
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.v-tabs {
  height: 100%;
  background-color: transparent;
  ::v-deep .v-tabs-items {
    background-color: transparent;
  }
}
.list_content {
  flex-direction: column;
  padding: 8px;
  min-height: 5rem;
  .col {
    padding: 2px;
    min-height: 1rem;
    text-align: right;
  }
  .row {
    margin: 0;
    background-color: transparent !important;
  }
  .card-lable {
    text-align: left;
  }
  .card-value {
    text-align: left;
  }
}

.task {
  padding-bottom: 56px;
  &_from {
    background-color: #fff;
    margin-bottom: 6px;
    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;
      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;
        .col {
          padding-bottom: 6px;
        }
      }
    }
    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;
      .col {
        padding: 6px 8px;
      }
    }
  }
}
.v-card__subtitle {
  display: flex;
  margin: 0;

  .row {
    margin: 0;
    background-color: #fff;
    .col {
      min-height: 1rem;
      padding: 8px;
    }
    .receiving_heard {
      border-top: 1px solid grey;
      font-size: 16px;
      font-weight: bold;
    }
    .row {
      background-color: inherit;
    }
  }
}

.v-card__text {
  padding: 0 10px !important;
  .row {
    margin: 0;
  }
  .col {
    padding: 8px;
    ::v-deep.v-input__prepend-outer {
      min-width: 2rem;
      margin-top: 10px;
    }
  }
}
.pickingCard {
  background-color: skyblue;
  border-radius: 8px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%), 3px 3px 6px rgb(0 0 0 / 14%),
    3px 3px 6px rgb(0 0 0 / 12%) !important;
  .col {
    padding: 0;
  }
  .row {
    margin: 0;
    .col {
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      color: #979899;
    }
    .pickingCard_title {
      font-size: 15px;
      font-weight: bold;
      color: #323333;
    }
  }
  // 10px 10px 5px #888888
}
.pickingCard-bottom {
  background-color: #fff;
  .col {
  }
}
.btn-left {
  background-color: #fff !important;
  ::v-deep.v-btn__content {
    color: #193690 !important;
  }
}
.pickingForm {
  .row {
    margin: 0;
    .col {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}

.pickingWrap {
  padding-bottom: 66px;
}

::v-deep.navigationBtns .navigationBtns_return .v-btn__content {
  color: #193690;
}

::v-deep.v-bottom-navigation .v-btn__content {
  color: #fff;
  font-size: 1rem;
}

.inputPlaceholder ::v-deep.v-text-field__slot input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
  font-size: 15px;
}
</style>